<script>
export default {
  name: 'Gender'
}
</script>
<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const { height } = defineProps(['height'])

const chart = ref()

const manNumer = 60

onMounted(() => {
  const myEcharts = echarts.init(chart.value)

  const option = {
    title: {
      // text: '水球图'-
    },
    yAxis: {
      show: false,
      type: 'category'
    },
    xAxis: {
      show: false,
      min: 0,
      max: 100
    },
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
    series: [
      {
        type: 'bar',
        data: [manNumer],
        barWidth: 20,
        itemStyle: {
          borderRadius: 10
        },
        z: 2
      },
      {
        type: 'bar',
        data: [100],
        barWidth: 20,
        barGap: '-100%',
        itemStyle: {
          borderRadius: 10
        },
        z: 1,
        animation: false
      }
    ]
  }

  myEcharts.setOption(option)
})
</script>

<template>
  <div
    class="container"
    :style="{ height: isNaN(+height) ? height : height + 'px' }"
  >
    <div class="titleBox">
      <div class="title">
        男女比例
        <div class="titleBg">&nbsp;</div>
      </div>
    </div>
    <div class="contentBox">
      <div class="other">
        <div class="item">
          <div class="manBox">
            男士
            <img src="../../../images/man.png" />
          </div>
          <div class="womanBox">
            女士
            <img src="../../../images/woman.png" />
          </div>
        </div>
      </div>
      <div class="echartsTitle">
        <span>男士 {{ manNumer }}%</span>
        <span>女士 {{ 100 - manNumer }}%</span>
      </div>
      <div
        class="chart"
        ref="chart"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  position: relative;
  width: 100%;
  background-color: red;
  background: url(../../../images/dataScreen-main-lc.png) no-repeat;
  background-size: 100% 100%;
  color: white;

  $boxHeight: 14%;
  .titleBox {
    position: relative;
    width: 100%;
    height: $boxHeight;

    .title {
      position: absolute;
      left: 0;
      top: 0;
      font-size: 20px;

      .titleBg {
        margin-top: 10px;
        background: url(../../../images/dataScreen-title.png) no-repeat;
      }
    }
  }

  .contentBox {
    position: relative;
    width: 100%;
    height: calc(100% - $boxHeight);
    padding: 20px;

    .other {
      width: 100%;
      height: 80%;
      display: flex;

      .item {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 40px;

        .manBox,
        .womanBox {
          position: relative;
          width: 35%;
          height: 70%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          background-color: rgb(255, 51, 0);
          // 微调文字和图片位置
          padding: 3px 0 20px 0;

          img {
            width: 70px;
            height: 70px;
          }
        }

        .manBox {
          background: url(../../../images/man-bg.png) no-repeat;
          background-size: 100% 100%;
        }
        .womanBox {
          margin-left: 28%;
          background: url(../../../images/woman-bg.png) no-repeat;
          background-size: 100% 100%;
        }
      }
    }

    .echartsTitle {
      padding: 0 40px;
      display: flex;
      justify-content: space-between;
    }
    .chart {
      padding: 0 40px;
      width: 100%;
      height: 20%;
    }
  }
}
</style>
